<template>
	<view class="wrap">
		<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>场地介绍<text class="font-size-base text-color-assist ml-10">(尽可能详细)</text></view>
				<u-form-item prop="introduce">
					<u-input height='300' type="textarea" v-model="form.introduce" />
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>上传场所照片</view>
				<view class="d-flex justify-content-start">
					<u-upload width="160" height="160" :file-list="media" :maxCount="9" :multiple='true' :previewFullImage="true" :auto-upload='false' @on-list-change="mediaChange"></u-upload>
				</view>
			</view>
			<view class="section" v-if="form.id">
				<u-form-item label="场所负责人" prop="type" label-width="160" :required="true">
					<u-input type="select" input-align="right" v-model="form.claim_name" placeholder="请选择场所负责人" @click="selectClaimUser = true"></u-input>
				</u-form-item>	
				<u-form-item label="联系方式" prop="type" label-width="160" :required="true">
					<u-input type="input" input-align="right" v-model="form.tel" placeholder="请输入联系方式"></u-input>
				</u-form-item>	
				<u-form-item label="联系微信" prop="type" label-width="160" :required="true">
					<u-input type="input" input-align="right" v-model="form.wechat_no" placeholder="请输入联系微信"></u-input>
				</u-form-item>	
			</view>
			<view class="section">
				<u-form-item label="场所类型" prop="type" label-width="160" :required="true">
					<u-input type="select" :select-open="selectTypeShow" input-align="right" v-model="form.type" placeholder="请选择场所类型" @click="selectTypeShow = true"></u-input>
				</u-form-item>
				<u-form-item label="场所性质" prop="isPrivate" label-width="160" :required="true">
					<u-radio-group v-model="form.isPrivate" @change="isPrivateChange" slot="right">
						<u-radio shape="circle" name="0">公共</u-radio>
						<u-radio shape="circle" name="1">私有</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="是否收费" prop="isFee" label-width="160" :required="true">
					<u-radio-group v-model="form.isFee" @change="isFeeChange" slot="right">
						<u-radio shape="circle" name="0">免费</u-radio>
						<u-radio shape="circle" name="1">收费</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="form.isFee==1" label="收费描述" label-width="160">
					<u-input type="textarea" placeholder="请输入收费描述" height='100' v-model='form.fee'></u-input>
				</u-form-item>
				<u-form-item label="是否预约" prop="isAppointment" label-width="160" :required="true">
					<u-radio-group v-model="form.isAppointment" @change="isAppointmentChange" slot="right">
						<u-radio shape="circle" name="0">不需要</u-radio>
						<u-radio shape="circle" name="1">需要</u-radio>
					</u-radio-group>
				</u-form-item>				
			</view>
			
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>场所地址</view>
				<u-form-item label="所在城市" prop="region" label-width="160" :required="true" @tap="citySelectChange=true">
					<u-input type="select" :select-open="citySelectChange" v-model="form.region" placeholder="请选择地区" @click="citySelectChange = true"></u-input>
				</u-form-item>
				<u-form-item label="场地名字" prop="name" label-width="160" :required="true">
					<u-input v-model="form.name"></u-input>
				</u-form-item>
				<u-form-item label="地理位置" prop="address" right-icon="map" label-width="160" :required="true">
					<view @tap="chooseLocation" :style="form.address?'color:#606266':'color:#C0C4CC;'">{{form.address?form.address:'点击选择位置坐标'}}</view>
				</u-form-item>
			</view>
		</u-form>
		<!-- 发布场地 end -->
		<view class="footer">
			<view class="button">
				<button type="primary" @tap='submit()'>发布</button>
			</view>
		</view>
		<!-- 城市选择 -->
		<city-select v-model="citySelectChange" @city-change="cityChange"></city-select>
		<u-select mode="single-column" :list="initialize.spaceTypeTags" v-model="selectTypeShow" @confirm="selectTypeConfirm"></u-select>
		
		<!-- 分享选择弹窗 -->
		<q-popup v-model="selectClaimUser">
			<view class="claim-wrap">
				<u-search v-model="claimUser" @custom="claimCustom" :show-action="true"></u-search>
				<view>
					<view v-for="(item,index) in claimUserList" :key="index" class="member-item">
						<u-avatar class="avatar" :src="item.avatar" :showSex="true" :sexIcon="item.gender_label"></u-avatar>
						<view class="user">
							<view class="name font-size-lg">{{ item.nickname }}</view>
							<view class="text-color-assist">
								<text class="mr-10" v-if="item.city || item.province">{{item.city || item.province}} |</text>
								<text class="mr-10">{{item.identity_label}}</text>
							</view>
						</view>
						<button class="border-radius-lg font-size-sm btn-gz" type="primary" @tap.stop="confirmClaim(item)">确定</button>
					</view>
				</view>
			</view>
		</q-popup>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import citySelect from '@/components/city-select/city-select.vue';
export default {
	components: {
		citySelect
	},
	computed:{
		...mapState(['initialize']),
	},
	data() {
		return {
			errorType: ['toast'],
			citySelectChange:false,
			selectClaimUser:false,
			claimUser:'',
			claimUserList:[],
			feeLabel:'',
			selectedStyleTagIndex:[],
			selectFeeModeShow:false,
			selectTypeShow:false,
			media:[],
			form: {
				id:'',
				claim_id:'',
				claim_name:'',
				tel:'',
				wehcat_no:'',
				name:'',
				introduce:'',
				media:[],
				type:'',
				typeValue:'',
				isPrivate:'',
				isFee:'',
				fee:'',
				isAppointment:'',
				province:'',
				provinceValue:'',
				city:'',
				cityValue:'',
				region:'',
				address:'',
				longitude:'',
				latitude:''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入场所名字',
						trigger: 'blur' ,
					}
				],
				introduce: [
					{
						required: true,
						message: '请输入场所介绍',
						trigger: 'blur' ,
					}
				],
				type: [
					{
						required: true,
						message: '请选择场所类型',
						trigger: 'change'
					},
				],
				region: [
					{
						required: true,
						message: '请选择面向地区',
						trigger: 'change'
					},
				],
				address: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: 'change'
					},
				]
			}
		};
	},
	onLoad() {
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		...mapMutations(['setUserInfo']),
		mediaChange(lists, name) {
			this.media = lists;
		},
		isPrivateChange(e){
			this.form.isPrivate = e;
		},
		isFeeChange(e){	
			this.form.isFee = e;
		},
		isAppointmentChange(e) {
			this.form.isAppointment = e;
		},
		selectTypeConfirm(e) {
			e.map((val, index) => {
				this.form.type = val.label;
				this.form.typeValue = val.value;
			})
		},
		cityChange(e) {	
			this.form.region    = e.city;
			this.form.province  = e.province;
			this.form.provinceValue = e.provinceValue;
			this.form.city      = e.city;
			this.form.cityValue = e.cityValue;
		},
		
		async submit() {
			if(this.form.isFee==='') {
				this.$u.toast("请选择费用模式！");return;
			}
			if(this.form.isPrivate==='') {
				this.$u.toast("请选择私人还是公有！");return;
			}
			if(this.form.isAppointment==='') {
				this.$u.toast("请选择是否需要预约！");return;
			}
			if(this.form.name==='') {
				this.$u.toast("请输入场所名字！");return;
			}
			if(this.form.address==='') {
				this.$u.toast("请选择地理位置！");return;
			}
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '是否确认发布？',
						confirmText:'发布',
						success (res) {
							if (res.confirm) {
								that.request();
							} 
						}
					})
				} 
			});
		},
		
		async request(e) {		
			uni.showLoading({
				mask: true,
				title: '提交中...'
			});
		
			uni.redirectTo({url:"/pages/jump/jump?txt=提交成功"})
			uni.hideLoading();
		},
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				success:(res)=>{
					that.form.address = res.address;
					that.form.longitude = res.longitude;
					that.form.latitude = res.latitude;
				}
			})
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 200rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}
.quan_release_foot {
	display: flex;
	padding: 40rpx 0;
    position: relative;
    font-size: 0;
    font-family: Helvetica;
	flex-flow: wrap; 
}
.quan_release_foot_emoji, 
.quan_release_foot_goods, 
.quan_release_foot_photo, 
.quan_release_foot_video {
    position: relative;
    display: inline-block;
	padding: 10rpx 36rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    border-radius: 60rpx;
    background-color: #f5f5f5;
	margin-bottom: 20rpx;
	margin-right: 10rpx;
}
.input-required {
	vertical-align: middle;
	color: #fa3534;
}
.selected_tag {
	background-color: rgb(239, 210, 52);
}
</style>
<style scoped lang="scss">
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	padding: 20rpx 0;
	
	.button {
		width: 100%;
		padding: 0 20rpx;
		
		button {
			width: 100%;
			height: 100%;
			border-radius: 50rpx !important;
		}
	}
}
.claim-wrap {
	padding: 30rpx 30rpx 0 30rpx;
	margin: 0 auto;
	min-height: 300rpx;
}
.member-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 2rpx solid #f5f5f5;
	background-color: #ffffff;
	&:last-child{
		border-bottom: 0;
	}
	
	.btn-gz {
		margin-left: auto;
	}
}
</style>
